﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        #chkResult{margin-left:53px;height:15px;}
    </style>
    <title>密码强度检查</title>
    
</head>
<body>
<form name="form1">
    <label for="pwd">用户密码</label>
    <input type="password" name="pwd" onblur="chkpwd(this)"  id="pwd"/>
    <div id="chkResult"></div>
    <label for="pwd2">重复密码</label>
    <input type="password" name="pwd2" id="pwd2"/>
</form>

<script type="text/javascript" language="JavaScript">
    // 检测密码的方法
    function chkpwd(obj){
        let t = obj.value;
        let id = getResult(t);
        // 定义对应的消息提示
        let msg = new Array(4);
        msg[0]="密码太短。";
        msg[1]="密码强度比较差。";
        msg[2]="密码强度一般。";
        msg[3]="密码强度高。";
        let sty = new Array(4);
        sty[0]=-45;
        sty[1]=-30;
        sty[2]=-15;
        sty[3]=0;
        //消息提示对应的颜色
        let col=new Array(4);
        col[0]="gray";
        col[1]="red";
        col[2]="#ff6600";
        col[3]="Green";

        //设置显示效果 
        let sWidth=300;
        let sHeight=15;
        let Bobj=document.getElementById("chkResult");
        Bobj.style.fontSize="12px";
        Bobj.style.color=col[id];
        Bobj.style.width=sWidth + "px";
        Bobj.style.height=sHeight + "px";
        Bobj.style.lineHeight=sHeight + "px";
        Bobj.style.textIndent="20px";
        Bobj.innerHTML="密码检测提示：" + msg[id];
    }

    //定义检测函数,返回0/1/2/3分别代表无效/差/一般/强 
    function getResult(s){
        if(s.length < 4){
            return 0;
        }    
        let ls = 0;
        if (s.match(/[a-z]/ig)){
            ls++;
        }
        if (s.match(/[0-9]/ig)){
            ls++;
        }
        if (s.match(/(.[^a-z0-9])/ig)){
            ls++;
        }
        if (s.length < 6 && ls > 0){
            ls--;
        }
        return ls
    }
    
</script>

</body>
</html>